<template>
<div>
  <div>
    <a-carousel autoplay>
      <div style="height:210px;" v-for="arr in arr01">
        <img :src="arr" style="width:100%;height:100%;" >
      </div>
    </a-carousel>
  </div>
  <div style="margin-top: 5%; margin-bottom: 5%;height: 80px;" v-if="isMobile()">
<!--      <div class="daohang" align="center" v-has="'cont:professor'"><a-button type="primary" shape="circle" size="large" icon="solution" @click="changeRoute('info')"></a-button><div>个人信息</div></div>
      <div class="daohang" align="center" v-has="'cont:demoProfessor'"><a-button type="primary" shape="circle" size="large" icon="form" @click="changeRoute('post')"></a-button><div>入库申请</div></div>
      <div class="daohang" align="center" v-has="'cont:professor'"><a-button type="primary" shape="circle" size="large" icon="project" @click="changeRoute('project')"></a-button><div>我的项目</div></div>
      <div class="daohang" align="center" v-has="'cont:professor'"><a-button type="primary" shape="circle" size="large" icon="alert" @click="changeRoute('leave')"></a-button><div>紧急请假</div></div>-->
    <div style="border: 1px solid ; height: 100px;">
      <div class="daohang" v-has="'cont:professor'" align="center" style="background-image: linear-gradient(to bottom left,#fad611, #fdbc1a);"><i class="action-jeecg actionyonghuxinxi" style="font-size: 35px; color: #ffffff;position: relative;left: 1px" @click="changeRoute('info')"></i><div style="margin-top: 10px">个人信息</div></div>
      <div class="daohang" v-has="'cont:professor'" style="background-image: linear-gradient(#69dff7, #4f53f2);" align="center"><i @click="changeRoute('post')" class="action-jeecg actionrukushenqingdan2" style="font-size: 37px;color: white; position: relative;left: 4px; top: 1px;"></i><div style="margin-top: 8px;">入库申请</div></div>
      <div class="daohang" v-has="'cont:professor'" style="background-image: linear-gradient(to bottom left, #6dfd44 , #00f037);" align="center"><i @click="changeRoute('project')" class="action-jeecg actionwodexiangmu" style="font-size: 35px; position: relative;top: 1px; color: #fcfdfd"></i><div style="margin-top: 11px">我的项目</div></div>
      <div class="daohang" v-has="'cont:professor'" style="background-image: linear-gradient(#fd008f, #fd004e);" align="center"><i @click="changeRoute('leave')" class="action-jeecg actionqingjia" style="font-size: 40px; position: relative; top: -2px; left: 2px"></i><div style="margin-top: 3px">紧急请假</div></div>
    </div>
     </div>
  <a-card :body-style="{padding:'5%'}" :bordered="false">
    <div slot="title" class="index-md-title">
      <img src="../../assets/duban.png"/>
      系统公告
    </div>
    <div>

      <a-list item-layout="vertical" size="large" :pagination="pagination" :data-source="listData">
        <!--<div slot="footer"><b>ant design vue</b> footer part</div>-->
        <a-list-item slot="renderItem" key="item.title" slot-scope="item, index">
          <template v-for="{type} in userIcon" slot="actions">
        <span :key="type">
          <a-icon :type="type" style="margin-right: 1px" />
          {{ item.createBy }}
        </span>
          </template>
<!--          <img
            slot="extra"
            width="200"
            alt=""
            :src="item.noticeImg == null? 'https://gw.alipayobjects.com/zos/rmsportal/mqaQswcyDLcXyDKnZfES.png':item.noticeImg"
            @click="showModal(index)"
          />-->
          <template v-for="{ type} in historyIcon" slot="actions">
        <span :key="type">
          <a-icon :type="type" style="main-right: 1px" />
          {{ item.createTime }}
        </span>
          </template>
          <div @click="showModal(index)">
            <a-list-item-meta >
              <!--
              introduction

              <a-list-item-meta :description="item.noticeIntroduction">
              -->
              <a slot="title">{{ item.noticeTitle }}</a>
                          <a-avatar slot="avatar" shape="square" :size="64" :src="item.noticeImg == null? 'https://s1.ax1x.com/2020/09/25/09csOO.th.png':item.noticeImg"/>
            </a-list-item-meta>
            <!--      {{ item.content }}-->
          </div>
        </a-list-item>
      </a-list>

      <a-modal v-model="visible" :title="this.currentData.noticeTitle" @ok="handleOk" :footer="false" width="90%">
        <div v-html='this.currentData.noticeText'>

        </div>
      </a-modal>
    </div>
  </a-card>

</div>
</template>
<script>
import { getAction } from '@/api/manage';
import { mixinDevice } from '@/utils/mixin.js';

export default {
  mixins: [mixinDevice],
  components:{
    getAction,
  },
  data() {
    return {
      arr01:[],
      visible: false,
      listData:[],
      pagination: {
        onChange: page => {
          this.pagination.current = page
          console.log(this.pagination.current);
          /*
             post pageSize and current to get new data
          *
          */
          getAction(this.url,{pageNo:page,pageSize: this.pagination.pageSize}).then((res)=>{
            console.log(res)
            this.listData = res.result.records
            /*
            set total
            */
            this.pagination.total = res.result.total
          })
        },
        pageSize: 10,
        simple:true,
        size:'small',
        total:0,
        current:1,
      },
      userIcon: [
        { type: 'user', text: 'xxx' },
      ],
      historyIcon: [
        { type: 'history', text: 'xxx' },
      ],

      url:'org/notice/list',
      url02:'/123/diyIndexPicter/list02',

      currentData:{}
    };
  },
  created() {
    getAction(this.url).then((res)=>{
      if (res.success){
        this.listData = res.result.records
        /*set total*/
        this.pagination.total = res.result.total
        console.log("12345645")
        console.log(res)
      }
    })
    getAction(this.url02).then((res)=>{
      if (res.success){
        console.log("123456789")
        console.log("123456789")
        let arr= res.result.records
        for (let i = 0; i < arr.length; i++) {
          this.arr01.push("http://localhost:8080/jeecg-boot/sys/common/static/"+arr[i].indexPicterString)
        }
      }
    })
  },
  methods:{
    changeRoute(page){
      if (page=='info'){
        this.$router.push({name:'diy-DiyProfessorInfo'})
      }else if (page=='post'){
        this.$router.push({name:'diy-DiyProfessorInfoWrite'})
      }else if(page=='project'){
        this.$router.push({name:'diy-MyProfessorProject'})
      }else if(page=='leave'){
        this.$router.push({name:'diy-ProfessorUrgentLeave'})
      }
    },
    showModal(id) {
      this.currentData = this.listData[id]
      this.visible = true;
    },
    handleOk(e) {
      console.log(e);
      this.visible = false;
    },
  }
};
</script>
<style scoped>
  /* For demo */
.ant-carousel >>> .slick-slide {
  text-align: center;
  height: 200px;
  line-height: 160px;
  background: #364d79;
  overflow: hidden;
}

.ant-carousel >>> .slick-slide h3 {
  color: #fff;
}
  .index-md-title{
    postion:relative;
    padding-left:24px;
    width: 100%;
    color: black;
    font-size: 21px;
    font-family: cursive;
  }
  .index-md-title img{
    position: absolute;
    height:32px;
    top: 15px;
    left:12px;
  }
  .daohang{
    width: 55px;
    height: 55px;
    background-color: #fd8700;
    border-radius:50%;
    float: left;
    margin-left: 5%;
  }
  .daohang>div{
    font-size: 13px;
  }
</style>